<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>
        <input type="password">
        <p>请输入6~16位密码</p>
        <button id="btn1">清空密码</button>
        <button id="btn2">显示密码</button>
    </div>

    <script>
        var ipt = document.querySelector('input');
        var p = document.querySelector('p');
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');


        ipt.onblur = function () {
            if (ipt.value.length >16 || ipt.value.length <6) {
                p.innerHTML='密码不合格，请重新输入！'
                p.style.color='red'
            }
            
            
            else {
                p.innerHTML='密码合格'
                p.style.color='green'
            }

        }



        flag = 1;
        btn2.onclick = function () {

            if (flag == 1) {
                ipt.type = 'text';
                ipt.innerHTML = '隐藏密码';
                flag = 0;
            } else {
                ipt.type = 'password';
                ipt.innerHTML = '显示密码';
                flag = 1;
            }

        }


        btn1.onclick = function () {
            ipt.value = '';

        }





    </script>

</body>

</html>